<template>
	<view>
		<!-- 搜索框 -->
		<view class="search1">
			<view class="search">
				<image src="../../static/搜索@3x.png"></image>
				<span>输入订单号进行搜索</span>
			</view>
			
			<view class="searchText"><span>搜索</span></view>
		</view>
		<!-- 总条数 -->
		<view class="total">
			共10条
		</view>
		<!-- 查看不同状态订单信息 -->
		<view class="status"  >
			<image src="../../static/jiantou.png" @click="toggleDropdown"></image>
			
			   <!-- 下拉框 -->
			      <view class="dropdown" v-show="isDropdownVisible">
			        <view 
			          v-for="(item, index) in dropdownItems" 
			          :key="index" 
			          class="dropdown-item" 
			          :class="{ 'selected': item === selectedOption }" 
			          @click="selectOption(item)"
			        >
			          {{ item }}
			        </view>
			      </view>
		</view>
		<!-- 订单详情表 -->
		<view v-for=" item in dataList" :key="item.id"  class="orderList">
			
			<!-- 头部 -->
				<view class="orderNum">
					订单号:{{item.orderNum}}
				</view>
				<view class="money">
					{{item.money}}元
				</view>
				<!-- 中部 -->
				<view class="item2">
					<view class="orderUser">
						<text>下单用户:&nbsp;{{item.orderUser}}</text>
					</view>
					<view class="reservation">
						<text>预约时间:&nbsp;{{item.Time}} </text>
					</view>
					<view class="service">
						<text>服务项目:&nbsp;{{item.service}}</text>
					</view>
				</view>
				<!-- 底部 -->
				<view class="orderTime">
					下单时间:{{item.Time}}
				</view>
				<button class="button1" @click="toDetail">查看详情</button>
		
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList:[
					{id:1,orderNum:2021010831213,money:"200.00",orderUser:"张三",Time:"2022-10-10 11 :00",service:"宝马X5加装轮毂、清洁车辆、汽车美容"},
					{id:2,orderNum:2021010831242,money:"120.00",orderUser:"李四",Time:"2022-10-12 11 :00",service:"宝马X5加装轮毂、清洁车辆、汽车美容"},
					{id:3,orderNum:2021010831232,money:"2154.00",orderUser:"王五",Time:"2022-10-10 11 :00",service:"宝马X5加装轮毂、清洁车辆、汽车美容"}
				],
				isDropdownVisible: false, // 控制下拉框的显示状态
				selectedOption: null, // 当前选中的项
				dropdownItems: ['待服务', '已完成'] // 下拉项列表
			}
		},
		methods: {
			  toggleDropdown() {
			       this.isDropdownVisible = !this.isDropdownVisible; // 切换下拉框的显示状态
			     },
			     selectOption(option) {
			       this.selectedOption = option; // 更新选中的项
			       this.isDropdownVisible = false; // 关闭下拉框
			     },
				 toDetail(){
					 uni.navigateTo({
					 	url:"/pages/OrderManagement/OrderDetails"
					 })
				 }
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
	/* 下拉框样式 */
	.dropdown {
	
	width: 75px;
	position: absolute;
	background-color: white;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	margin-top: 5px; /* 与图标之间的间距 */
	z-index: 1000; /* 确保下拉框在其他元素之上 */
	}
	
	.dropdown-item {
		
	  padding: 10px 15px;
	  cursor: pointer;
	  border-bottom: 1px solid #e0e0e0;
	}
	
	.dropdown-item:last-child {
	  border-bottom: none;
	}
	
	.dropdown-item:hover {
	  background-color: #f0f0f0;
	}
	
	/* 选中项样式 */
	.selected {
	  background-color: blue;
	  color: white;
	}
	/* 箭头样式 */
	.status{
		right: 55px;
		top: 55px; 
		background-color: rgba(255,255,255,1);
		position: absolute;
	}
	.status image{
		width: 25px;
		height: 20px;
	}
	/* 订单列表样式 */
	.orderList{
		margin: 0px 6px 5px 9px;
		height: 174px;
		line-height: 20px;
		border-radius: 8px;
		background-color: rgba(255,255,255,1);
		color: rgba(16,16,16,1);
		font-size: 14px;
		border-bottom: 1px solid #EEF1F6;
		/* border: 1px solid red; */
		border-left: 5px solid #1D6FFF;
		position: relative;
	}
	
	.orderNum{
		margin-top: 5px;
		margin-left: 10px;
		height: 24px;
		line-height: 24px;
		color: rgb(16,16,16);
		font-size: 16px;
		font-weight: bold;
		text-align: left;
		position: absolute;
	}
	.money{
		
		right: 20px;
		top: 7px;
		height: 20px;
		line-height: 20px;
		font-weight: bold;
		color: rgba(240,89,90,1);
		font-size: 14px;
		position: absolute;
	}
	.item2{
		
		top: 39px;
		width: 360px;
		height: 107px;
		/* background-color: #1D6FFF; */
		border-top: 1px solid #EEF1F6;
		border-bottom: 1px solid #EEF1F6;
		position: absolute;
	}
	.orderUser {
		left: 12px;
		top: 5px;
		font-weight: bold;
		line-height: 20px;
		color: rgb(16,16,16);
		font-size: 14px;
		text-align: left;
		position: absolute;
	}
	.reservation{
		left: 12px;
		top: 35px;
		font-weight: bold;
		line-height: 20px;
		color: rgb(16,16,16);
		font-size: 14px;
		text-align: left;
		position: absolute;
	}
	.service{
		left: 12px;
		top: 65px;
		font-weight: bold;
		line-height: 20px;
		color: rgb(16,16,16);
		font-size: 14px;
		text-align: left;
		position: absolute;
	}
	/* 底部样式 */
	.orderTime{
		left: 12px;
		top: 150px;
		width: 167px;
		height: 21px;
		line-height: 20px;
		font-weight: bold;
		color: rgba(154,154,154,1);
		font-size: 12px;
		text-align: left;
		position: absolute;
	}
	.button1{
		right: 20px;
		top: 150px;
		width: 115px;
		height: 24px;
		line-height: 24px;
		border-radius: 4px;
		background-color: rgba(85,122,214,1);
		color: rgba(255,255,255,1);
		font-size: 14px;
		text-align: center;
		border: 1px solid rgba(255,0,0,0);
		position: absolute;
	}
	/* 总条数样式 */
	.total{
		margin-top: 5px;
		margin-bottom: 10px;
		margin-left: 10px;
		height: 20px;
		line-height: 20px;
		color: rgba(16,16,16,1);
		font-size: 14px;
		font-weight: bold;
		text-align: left;
	}
	/* 搜索框样式 */
	.search1{
		height: 38px;
		padding-top: 8px;
		position: relative;
		background-color: #EFEFF5;
	}
	.search {
		padding: 4px 0;
		margin: 0px 52px 15px 10px;
		text-align: center;
		font-size: 14px;
		line-height: 20px;
		background-color: #FFFFFF;
		color: rgba(133,133,133,1);
		border-radius: 8px;
		
	}
	.search image {
		margin-right: 5px;
		width: 14px;
		height: 14px;
		background-color: rgba(204,204,204,1);
	}
	.searchText{
		position: absolute;
		right: 12px;
		top: 10px;
		font-size: 15px;
		color: #1D6FFF;
	}
</style>
